<template>
  <div class="home" style="width: 100%;height:100%;">
    <!-- <Dingbu :nameTitle="PageName"></Dingbu> -->
    <div class="content">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="180">
            <FormItem label="商品名称" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入商品名称" @on-blur="check"></Input>
            </FormItem>
            <FormItem label="商品描述" prop="des">
                <Input v-model="formValidate.des" type="textarea" @on-blur="check" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入商品描述"></Input>
            </FormItem>
            <FormItem label="商品分类">
                <select @on-change="changeselect()" v-model="formValidate.cate_id" class="xlk">
                    <option v-for="item in type" :key="item.id" :value="item.id">{{ item.name }}</option>
                </select>
            </FormItem>
            <FormItem label="商品价格(元)" prop="price">
                <Input v-model="formValidate.price" placeholder="请输入商品价钱" @on-blur="check"></Input>
            </FormItem>
            <FormItem label="餐盒费(元)" prop="box_fee">
                <Input v-model="formValidate.box_fee" placeholder="请输入餐盒费" @on-blur="check"></Input>
            </FormItem>
            <FormItem label="商品销量" prop="sales">
                <Input v-model="formValidate.sales" placeholder="请输入商品销量" @on-blur="check"></Input>
            </FormItem>
            <FormItem label="商品库存" prop="stock">
                <Input v-model="formValidate.stock" placeholder="请输入库存" @on-blur="check"></Input>
            </FormItem>
            <FormItem label="商品图片" prop="cover">
                <img :src="formValidate.cover" alt="" style="height:58px;cursor:pointer;" @click="handleView()" title="点击预览大图">
                <Upload action="https://shop.hx2lm.com/api/user/upload" :format="['jpg','png','jpeg']" :max-size="5120" :on-format-error="handleFormatError" :on-success="Success">
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传商品图片</Button>
                </Upload>
                <div for="" class="label red">请上传jpg/png/jpeg格式文件大小不超过5M，建议分辨率不小于640*640</div>
            </FormItem>
            <FormItem>
                <Button @click="goList" type="warning">返回</Button>
                <Button type="success" @click="handleSubmit">保存</Button>
            </FormItem>
        </Form>
    </div>
  </div>
</template>
<script>
import Dingbu from "../header/dingbu.vue";
import { mapGetters, mapMutations, mapActions } from "vuex";
import Base from "../../common/Base";
import {
  good_detail,
  add_good,
  edit_good,
  cate_list
} from "../../api/shop/shop.js";
export default {
  mixins: [Base],
  data() {
    return {
      PageName: "商品详情",
      cate_id: null,
      type: [],
      bstop: false,
      formValidate: {
        name: "", //名称
        cover: "", //图片
        cate_id: "", //分类
        des: "", //描述
        price: null, //价钱
        sales: null, //销量
        stock: null, //库存
        box_fee: null //餐盒费
      },
      ruleValidate: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        box_fee: [{ required: true, message: "请输入餐盒费", trigger: "blur" }],
        sales: [{ required: true, message: "请输入销量", trigger: "blur" }],
        stock: [{ required: true, message: "请输入库存", trigger: "blur" }],
        des: [{ required: true, message: "请输入商品描述", trigger: "blur" }]
      }
    };
  },
  mounted() {
    if (localStorage.getItem("shop_id") != -1) {
      this.getData();
      this.bstop = true;
    }
  },
  created() {
    cate_list({
      token: 1
    }).then(res => {
      this.type = res.data;
    });
  },
  components: {
    Dingbu
  },
  methods: {
    //图片格式错误
    handleFormatError(file) {
      this.$Notice.warning({
        title: "图片格式不正确",
        desc: file.name + " 格式不正确, 请选择 jpg 或 png 或 jpeg."
      });
    },
    //验证商品名称
    check() {
      if (
        this.formValidate.name.trim() != "" &&
        this.formValidate.des.trim() != "" &&
        this.formValidate.cate_id != "" &&
        this.formValidate.price != "" &&
        this.formValidate.box_fee != "" &&
        this.formValidate.sales != "" &&
        this.formValidate.stock != "" &&
        this.formValidate.cover != ""
      ) {
        this.bstop = true;
      } else {
        this.bstop = false;
      }
    },
    changeselect() {
      this.formValidate.cate_id = value;
      if (this.formValidate.cate_id != "") {
        this.bstop = true;
      } else {
        this.bstop = false;
      }
    },
    goList() {
      this.$router.go(-1);
    },
    Success(res) {
      this.formValidate.cover = res.data.url;
      if (this.formValidate.cover != "") {
        this.bstop = true;
      } else {
        this.bstop = false;
      }
    },
    handleSubmit() {
      if (this.bstop) {
        this.formValidate.price *= 100;
        if (localStorage.getItem("shop_id") == -1) {
          add_good(this.formValidate).then(res => {
            this.$Message.success("添加成功！");
            this.$router.push({ name: "shopList" });
          });
        } else {
          edit_good(
            Object.assign(
              {},
              { id: localStorage.getItem("shop_id") },
              this.formValidate
            )
          ).then(res => {
            this.getData();
            this.$Message.success("修改成功！");
            this.$router.push({ name: "shopList" });
          });
        }
      } else {
        this.$Notice.open({
          title: "表单验证失败！",
          duration: 1.5
        });
      }
    },
    handleView() {
      this.loadImg(this.formValidate.cover);
    },
    getData() {
      good_detail({
        id: localStorage.getItem("shop_id")
      }).then(res => {
        this.formValidate.cate_id = parseInt(res.data.cate_id);
        res.data.price /= 100;
        this.formValidate = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.content {
  width: 80%;
  margin-top: 20px;
}

.xlk {
  width: 100%;
  border: 1px solid #e6e6e6;
  height: 38px;
  border-radius: 4px;
}
</style>